<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        width: 100%;
        height: 100%;
        background-image: url(./2022.png);
        background-size: 100%;
        overflow: hidden;
      }
      p {
        color: yellow;
        font-size: 20px;
        width: 230px;
        margin-left: 800px;
        margin-top: 30px;
      }
      span {
        width: 20px;
        color: #ffd829;
        font-size: 32px;
      }
      div {
        margin-left: 950px;
      }
    </style>
  </head>
  <body>
    <p>距离2022-2-1 过年 还有:</p>
    <div><span></span>天 <span></span>时 <span></span>分 <span></span>秒</div>
    <script>
      let spans = document.querySelectorAll("span");
      // console.log(spans);
      let targetDate = new Date("2022-2-1 00:00:00");
      setInterval(() => {
        let now = new Date();
        let c = targetDate - now;
        let ti = parseInt(c / 1000 / 60 / 60 / 24);
        let hs = parseInt(c / 1000 / 60 / 60) % 24;
        let ms = parseInt(c / 1000 / 60) % 60;
        let ss = parseInt(c / 1000) % 60;
        ti = ti >= 10 ? ti : "0" + ti;
        hs = hs >= 10 ? hs : "0" + hs;
        ms = ms >= 10 ? ms : "0" + ms;
        ss = ss >= 10 ? ss : "0" + ss;
        spans[0].innerHTML = ti;
        spans[1].innerHTML = hs;
        spans[2].innerHTML = ms;
        spans[3].innerHTML = ss;
      });
    </script>
  </body>
</html>
